<style>

    .container {
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        height: 100vh; /* 改为固定高度 */
        display: flex;
        flex-direction: column;
    }

    .chat-container {
        flex: 1;  /* 占据剩余空间 */
        overflow-y: auto;  /* 自动显示滚动条 */
        padding: 15px;
        background-color: #f5f5f5;
        min-height: 0;  /* 允许内容压缩 */
        /* 添加最大高度限制 */
        max-height: 69vh; /* 根据实际布局调整 */
    }


    .problem-description {
        padding: 15px;
        background-color: #ff7f32;
        border-bottom: 1px solid #e0e0e0;
    }

    .problem-description h3 {
        margin-bottom: 10px;
        font-size: 16px;
        color: #fff;
    }

    .problem-text {
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
        font-size: 14px;
    }



    .message {
        margin-bottom: 15px;
        max-width: 80%;
        position: relative;
    }

    .system-message {
        margin-right: auto;
        background-color: white;
        border-radius: 8px 8px 8px 0;
        padding: 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .user-message {
        margin-left: auto;
        background-color: #95ec69;
        color: #333;
        border-radius: 8px 8px 0 8px;
        padding: 12px;
    }

    .message-time {
        font-size: 11px;
        color: #999;
        margin-top: 5px;
        text-align: right;
    }
    .user-time {
        font-size: 11px;
        color: #999;
        margin-top: 5px;
        text-align: right;
    }

    .input-area {
        background-color: white;
        border-top: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        position: sticky;
        bottom: 0;
        padding: 10px;
    }

    .input-area input {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid #e0e0e0;
        border-radius: 20px;
        outline: none;
        font-size: 14px;
    }

    .input-area button {
        margin-left: 10px;
        padding: 12px 20px;
        background-color: #e9e9e9;
        color: #5fb878;
        border: none;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }
    .input-area input[type="text"] {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid #e0e0e0;
        border-radius: 24px;
        outline: none;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .input-area input[type="text"]:focus {
        border-color: #1a73e8;
        box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
    }

    .input-area button {
        padding: 12px 20px;
        background-color: #1a73e8;
        color: white;
        border: none;
        border-radius: 24px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .input-area button:hover {
        background-color: #1557b0;
    }

    .input-area button:active {
        transform: scale(0.96);
    }

    .image-preview {
        max-width: 100%;
        max-height: 200px;
        border-radius: 8px;
        display: block;
        margin: 0 auto;
    }

    .cancel-preview {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease;
    }

    .cancel-preview:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

    /* 图片按钮样式 */
    .image-upload {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image-button {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    .image-button:hover {
        background-color: #e0e0e0;
    }

    .image-button:active {
        transform: scale(0.95);
    }

    .image-button::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.1);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .image-button:hover::after {
        opacity: 1;
    }

    .image-button img {
        width: 24px;
        height: 24px;
        opacity: 0.7;
        transition: all 0.2s ease;
    }

    .image-button:hover img {
        opacity: 0.9;
    }

    .image-input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        top: 0;
        left: 0;
    }

    /* 图片预览区域 */
    .preview-container {
        padding: 4px;
        background-color: #f8f9fa;
        border-radius: 12px;
        margin: 0 15px 10px;
        position: relative;
        display: none;
        animation: fadeIn 0.3s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .preview-container.visible {
        display: block;
    }


    /* 图片消息样式 */
    .image-message {
        max-width: 200px;
        max-height: 200px;
        border-radius: 8px;
        margin-top: 5px;
        display: block;
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .image-message:hover {
        transform: scale(1.02);
    }

    /* 图片放大查看模态框 */
    .image-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease-out;
    }

    .image-modal-content {
        max-width: 90%;
        max-height: 90%;
    }

    .image-modal-close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: white;
        font-size: 35px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .image-modal-close:hover {
        color: #ccc;
    }

    .typing-indicator {
        display: flex;
        padding: 10px 15px;
        background: white;
        border-radius: 18px 18px 18px 0;
        width: fit-content;
        margin-bottom: 15px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .typing-dot {
        width: 8px;
        height: 8px;
        background-color: #666;
        border-radius: 50%;
        margin: 0 2px;
        animation: typingAnimation 1.4s infinite ease-in-out;
    }

    .typing-dot:nth-child(1) {
        animation-delay: 0s;
    }

    .typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

    @keyframes typingAnimation {
        0%, 60%, 100% { transform: translateY(0); }
        30% { transform: translateY(-5px); }
    }

    /* 响应式调整 */
    @media (max-width: 480px) {

        .image-button {
            width: 38px;
            height: 38px;
        }

        .image-button img {
            width: 20px;
            height: 20px;
        }

        .image-modal-content {
            max-width: 95%;
            max-height: 80%;
        }

        .image-modal-close {
            top: 10px;
            right: 15px;
            font-size: 30px;
        }
    }
</style>
<div id = "ReportDetail" class="popup-container">
    <button class="close-btn" onclick="hideReportDetail()">×</button>
    <div class="header">客服中心</div>
    <div class="content">
        <div class="container">
            <div class="problem-description">
                <h3>问题描述</h3>
                <div class="problem-text" id="problemText">
                    {$data['content']['desc']}
                    <input type="hidden" id="customer_id" name="customer_id" value="{$data['id']}">
                </div>
            </div>

            <div class="chat-container" id="chatContainer">
            {if !empty($detail_list)}
                    <!-- 聊天消息将在这里动态加载 -->
                {foreach name="detail_list" item="vo"}
                    <!-- 问题描述 -->
                    {if condition="$vo['type'] == 1"}<!-- 用户消息 -->

                            <div class="message user-message">
                            {if !empty($vo['images'])}
                            <img src="{$vo['images']}" class="image-message" onclick="openModal(this)">
                            {else}
                            {$vo['content']}
                            {/if}
                                <div class="user-time">{$vo['update_time']}</div>
                            </div>

                    {else}<!-- 客服消息 -->
                        <div class="message system-message">{$vo['content']}<div class="message-time">{$vo['update_time']}</div></div>
                    {/if}
                {/foreach}
            {/if}
            </div>

            <!-- 图片预览区域 -->
            <div id="previewContainer" class="preview-container">
                <button class="cancel-preview" id="cancelPreview" onclick="cancelPreview()">×</button>
                <img id="imagePreview" class="image-preview">
            </div>

            {if condition="$data['status'] == 1"}
                <div class="input-area">
                    <div class="image-upload">
                        <button class="image-button" id="imageButton" title="发送图片">
                            <img src="" alt="发送图片">
                        </button>
                        <input type="file" id="imageInput" onchange="imagePreview(this)" class="image-input" accept="image/*">
                    </div>

                    <input type="text" placeholder="请输入您的问题..." id="userInput" autocomplete="off">
                    <button id="sendBtn" onclick="sendMessage()">发送</button>
                </div>
            {/if}
        </div>
    </div>
</div>

<!-- 图片放大查看模态框 -->
<div id="imageModal" class="image-modal">
    <span class="image-modal-close" id="imageModalClose">&times;</span>
    <img class="image-modal-content" id="modalImage">
</div>
